<%--
  Created by IntelliJ IDEA.
  User: 19012
  Date: 2021/7/5
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>购物车页面</title>

    <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="../basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="../css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="../css/optstyle.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="../js/jquery.js"></script>

</head>

<body>

<!--顶部导航条 -->
<div class="am-container header">
    <ul class="message-l">
        <div class="topMessage">
            <div class="menu-hd">
            </div>
        </div>
    </ul>
    <ul class="message-r">
        <div class="topMessage home">
            <div class="menu-hd"><a href="/home" target="_top" class="h">商城首页</a></div>
        </div>
        <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng"><a href="/personCenter" target="_top"><i
                    class="am-icon-user am-icon-fw"></i>个人中心</a></div>
        </div>
        <div class="topMessage mini-cart">
            <div class="menu-hd"><a id="mc-menu-hd" href="/cartList" target="_top"><i
                    class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span></a>
            </div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd"><a href="/toCollection" target="_top"><i
                    class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
        </div>
    </ul>
</div>

<!--悬浮搜索框-->

<div class="nav white">
    <div class="logo"><img src="../images/logo.png"/></div>
    <div class="logoBig">
        <li><img src="../images/logobig.png"/></li>
    </div>
</div>

<div class="clear"></div>

<!--购物车 -->
<div class="concent">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-chk">
                    <div id="J_SelectAll1" class="select-all J_SelectAll">

                    </div>
                </div>
                <div class="th th-item">
                    <div class="td-inner">商品信息</div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">金额</div>
                </div>
                <div class="th th-op">
                    <div class="td-inner">操作</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="bundle  bundle-last ">
            <div class="bundle-hd">
                <div class="bd-promos">
                    <div class="bd-has-promo">更多优惠:&nbsp;&nbsp;</div>
                    <div class="act-promo">
                        <a href="/search" target="_top">请前往商城添加<span class="gt">&gt;&gt;</span></a>
                    </div>
                    <span class="list-change theme-login">编辑</span>
                </div>
            </div>
            <div class="clear"></div>
            <c:forEach items="${cartList}" var="cart">
            <c:set var="quantity" value="${cart.quantity}"/>
            <c:set var="totalPrice" value="${ totalPrice + (cart.price * cart.quantity)}"/>
            <tr class="item-list">

                <div class="bundle-main">
                    <ul class="item-content clearfix">
                        <li class="td td-chk" id="td-chk">
                            <div class="cart-checkbox ">
                                <input class="check" id="J_CheckBox${cart.carId}" name="items" checked="checked"
                                       value="${cart.carId}" type="checkbox">
                                <label for="J_CheckBox_${cart.carId}"></label>
                            </div>
                        </li>
                        <li class="td td-item">
                            <div class="item-pic">
                                <a href="#" target="_top" class="J_MakePoint" data-point="tbcart.8.12">
                                    <img src="${cart.pictureUrl}" class="itempic J_ItemImg" width="80px" height="80px"></a>
                            </div>
                            <div class="item-info">
                                <div class="item-basic-info">
                                    <a href="toProductInfo?productId=${cart.productId}" target="_top"
                                       class="item-title J_MakePoint" data-point="tbcart.8.11">${cart.proName}</a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-info">
                            <div class="item-props ">
                                <span class="sku-line">口味：${cart.flavor}</span>
                                <span class="sku-line">包装：${cart.pack}</span>

                                <i class="theme-login am-icon-sort-desc"></i>
                            </div>
                        </li>
                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">
                                    <div class="price-line">
                                        <em class="J_Price${cart.carId} price-now" id="J_Price${cart.carId}"
                                            tabindex="0">${cart.price}</em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-amount">
                            <div class="amount-wrapper ">
                                <div class="item-amount ">
                                    <div class="sl">
                                        <input class="min${cart.carId} am-btn" name="" onclick="mul(${cart.carId});"
                                               type="button" value="-"/>
                                        <input class="text_box${cart.carId} number" name="quantity" type="text"
                                               id="text_box${cart.carId}" value="${cart.quantity}"
                                               style="width:30px;" onblur="onblu(${cart.carId})"/>
                                        <input type="hidden" id="stoc${cart.carId}" value="${cart.stock}">
                                        <input class="add${cart.carId} am-btn" name="" onclick="add(${cart.carId});"
                                               type="button" value="+"/>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-sum" id="td-sum">
                            <div class="td-inner" id="t-sum">
                                <em tabindex="0" class="J_ItemSum${cart.carId} number"
                                    id="J_ItemSum number ItemSum">${cart.amount}</em>
                            </div>
                        </li>
                        <li class="td td-op">
                            <div class="td-inner">
                                <a title="移入收藏夹" class="btn-fav" href="${cart.productId}" id="${cart.carId}">
                                    移入收藏夹</a>
                                <a href="/delCart/${cart.carId}" class="del">
                                    删除</a>
                            </div>
                        </li>
                    </ul>
                    </c:forEach>
                </div>
        </div>
        </tr>

        <div class="float-bar-wrapper">
            <div id="J_SelectAll2" class="select-all J_SelectAll">
                <div class="cart-checkbox">
                    <input class="check-all check" id="J_SelectAllCbx2" name="select-all" checked="checked"
                           type="checkbox" onclick="checkAll()">
                    <label for="J_SelectAllCbx2" onclick="checkAll()"></label>
                </div>
                <span>全选</span>
            </div>
            <div class="operations">
                <a href="#" hidefocus="true" class="deleteAll">删除</a>
                <%--<a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>--%>
            </div>
            <div class="float-bar-right">
                <div class="amount-sum">
                    <span class="txt">已选商品</span>
                    <em id="amount-sum">0</em><span class="txt">件</span>
                    <div class="arrow-box">
                        <span class="selected-items-arrow"></span>
                        <span class="arrow"></span>
                    </div>
                </div>
                <div class="price-sum">
                    <span class="txt">合计:</span>
                    <strong class="price">¥<em id="J_Total" value="${totalPrice}">0.00</em></strong>
                </div>
                <div class="btn-area" title="请注意如果没有选择宝贝，将无法结算">
                    <a href="/showShopAddress" id="J_Go" class="submit-btn submit-btn-disabled">
                        <span>结&nbsp;算</span></a>
                </div>
            </div>

        </div>

        <div class="footer">
            <div class="footer-hd">
                <p>
                    <b>|</b>
                    <a href="/home">商城首页</a>
                    <b>|</b>
                    <a href="https://www.alipay.com/">支付宝</a>
                    <b>|</b>
                    <a href="/toOrder">订单</a>
                </p>
            </div>
            <div class="footer-bd ">
                <p>
                    <a href="https://www.alipay.com/">合作伙伴</a>
                    <a href="/home">联系我们</a>
                    <a href="/home">网站地图</a>
                </p>
            </div>
        </div>
    </div>
</div>


<!--引导 -->
<div class="navCir">
    <li><a href="home2.html"><i class="am-icon-home "></i>首页</a></li>
    <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
    <li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
    <li><a href="../person/index.html"><i class="am-icon-user"></i>我的</a></li>
</div>
<form action="#" method="post">
    <input type="hidden" name="_method" value="delete"/>
</form>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    var checked = 0;
    var carId = 0;
    var quantity = 0;
    var amount = 0;
    var che = 0;


    $(function () {
        $(".del").click(function () {
            // 提示
            if (!confirm("确定要删除吗？")) {
                return false;
            }
            // 提交form表单
            $("form").attr("action", $(this).attr("href")).submit();
            // 取消表单的默认提交事件
            return false;
        })


        $(".deleteAll").click(function () {
            if (confirm("确定要删除吗？")) {
                $("input[name='items']").each(function () {
                    if ($(this).is(":checked")) {
                        var carId = $(this).val();

                        location.href = "delByCarId?carId=" + carId
                    }

                })
            }
            return false;
        })

        $(".btn-fav").click(function () {
            if (!confirm("是否移入收藏夹")) {
                return false;
            }
            var carId = $(this).attr("id");
            $.getJSON("/addcoll", {"productId": $(this).attr("href"), "carId": carId}, function (data) {
                if (data) {
                    alert("加入收藏夹成功！");
                    if (confirm("是否要删除购物车该商品？")) {
                        location.href = "delByCarId?carId=" + carId
                    }
                } else {
                    alert("商品已在收藏夹存在");
                    if (confirm("是否要删除购物车中该商品？")) {
                        location.href = "delByCarId?carId=" + carId
                    }
                }
            })
            return false;
        })


        $(".J_BatchFav").click(function () {
            $("input[name='items']").each(function () {
                if ($(this).is(":checked")) {
                    var productId = $(this).val();
                    location.href = "addByProductId?productId=" + productId
                }
            })
        })


    })

    function add(index) {
        $(".text_box" + index).val(parseInt($(".text_box" + index).val()) + 1);
        var num = $(".text_box" + index).val();
        var price = parseInt($(".J_Price" + index).text());
        var stock = parseInt($("#stoc" + index).val());
        if (num > stock) {
            alert("商品数量超出库存");
            $(".text_box" + index).val(stock);
            num = $(".text_box" + index).val();
        }
        $(".J_ItemSum" + index).html((num * price).toFixed(2));
        carId = index;
        quantity = $(".text_box" + index).val();

        amount = $(".J_ItemSum" + index).text();

        var checke = document.getElementById("J_CheckBox" + index);

        if (checke.checked == true) {
            checked = 1;
        } else {
            checked = 0;
        }

        totalPrice();
        up();

    }

    function mul(index) {
        $(".text_box" + index).val(parseInt($(".text_box" + index).val()) - 1);
        var num = $(".text_box" + index).val();
        carId = index;
        quantity = $(".text_box" + index).val();
        amount = $(".J_ItemSum" + index).text();
        var checke = document.getElementById("J_CheckBox" + index);
        if (checke.checked == true) {
            checked = 1;
        } else {
            checked = 0;
        }

        if (num < 1) {
            alert("商品数量不能小于1");
            $(".text_box" + index).val(1);
            num = $(".text_box" + index).val();
        }
        var price = parseInt($(".J_Price" + index).text());
        $(".J_ItemSum" + index).html((num * price).toFixed(2));
        totalPrice();
        up();

    }

    function onblu(index) {
        var stock = parseInt($("#stoc" + index).val());
        if ($(".text_box" + index).val() < 1) {
            $(".text_box" + index).val(1);
        } else if ($(".text_box" + index).val() > stock) {
            $(".text_box" + index).val(stock);
        }
        $(".J_ItemSum" + index).text((parseInt($(".text_box" + index).val()) * parseInt($(".J_Price" + index).text())).toFixed(2));
        totalPrice();
    }


    init();

    function init() {
        var box = document.getElementById("J_SelectAllCbx2");
        if (box.checked == true) {
            checked = 1;
            che = 0;

        } else {
            checked = 0;
            che = 1;
        }
        checkAll();
        upAll();
    }


    $(".check-all").click(function () {

        var box = document.getElementById("J_SelectAllCbx2");

        if (box.checked == true) {
            checked = 1;
            che = 0;

        } else {
            checked = 0;
            che = 1;
        }
        upAll();
        if ($("input[name='items']:checked").length == 0) {
            $(".btn-area").css("background-color", "#C0C0C0");
            $(".submit-btn-disabled").css("pointer-events", "none");

        } else {
            $(".btn-area").css("background-color", "#FF4400");
            $(".submit-btn-disabled").css("pointer-events", "auto");
        }
    })

    $("input[name='items']").click(function () {
        carId = $(this).val();
        amount = parseFloat($(this).parent().parent().siblings(".td-sum").children().children().text());
        quantity = parseInt($(this).parent().parent().siblings(".td-amount").children().children().children().children(".number").val());
        var checke = document.getElementById("J_CheckBox" + carId);
        if (checke.checked == false) {
            checked = 0;
        } else {
            checked = 1;
        }


        var box = document.getElementById("J_SelectAllCbx2");
        var checkes = document.getElementsByName("items");
        for (var i = 0; i < checkes.length; i++) {
            if (checkes[i].checked == false) {
                box.checked = false;
                break;
            } else {
                box.checked = true;
            }
        }
        if ($("input[name='items']:checked").length == 0) {
            $(".btn-area").css("background-color", "#C0C0C0");
            $(".submit-btn-disabled").css("pointer-events", "none");
        } else {
            $(".btn-area").css("background-color", "#FF4400");
            $(".submit-btn-disabled").css("pointer-events", "auto");
        }


        totalPrice();

        up();
    })


    function totalPrice() {
        var total = 0;
        var count = 0;
        if ($("input[name='items']:checked").length == 0) {
            $("#J_Total").html(parseFloat(0).toFixed(2));
            $("#amount-sum").html(0);
        } else {
            $("input[name='items']:checked").each(function () {
                total += parseFloat($(this).parent().parent().siblings(".td-sum").children().children().text());
                count += parseInt($(this).parent().parent().siblings(".td-amount").children().children().children().children(".number").val())
                $("#J_Total").html((total).toFixed(2));
                $("#amount-sum").html(count);
            })
        }
    }


    function checkAll() {
        var box = document.getElementById("J_SelectAllCbx2");
        var checkes = document.getElementsByName("items");
        if (box.checked == false) {
            for (var i = 0; i < checkes.length; i++) {
                checkes[i].checked = false;
            }
            totalPrice();
        } else {
            for (var i = 0; i < checkes.length; i++) {
                checkes[i].checked = true;
            }
            totalPrice();
        }
    }

    if ($("input[name='items']:checked").length == 0) {
        $(".btn-area").css("background-color", "#C0C0C0");
        $(".submit-btn-disabled").css("pointer-events", "none");
    } else {
        $(".btn-area").css("background-color", "#FF4400");
        $(".submit-btn-disabled").css("pointer-events", "auto");
    }


    function check() {


    }

    function upAll() {
        $.getJSON("/upallcart", {"checked": checked, "che": che}, function (data) {
            if (data) {

            }
        })
    }


    function up() {
        $.getJSON("/upcart", {
            "carId": carId,
            "checked": checked,
            "quantity": quantity,
            "amount": amount
        }, function (data) {
            if (data) {

            }
        })
    }


</script>

</html>
